<template>
  <el-dialog
    v-model="isShow"
    :title="title"
    width="800"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <!-- <search-form ref="refSearchForm" @confirm="handleSearch" /> -->
    <el-table
          v-loading="tableData.loading"
          ref="refTable"
          :data="tableData.list"
          stripe
          border
          style="width: 100%"
          row-key="id"
          :header-cell-style="tableData.headerCellStyle"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
          <el-table-column label="头像" prop="avatar">
					  <template #default="scope">
              <div style="display: flex; justify-content: center">
                <ImageUpload v-model:imageUrl="scope.row.appUserListVo.avatar" height="50px" width="50px" disabled />
              </div>
					  </template>
				  </el-table-column>
          <el-table-column label="用户名" prop="appUserListVo.username"/>
          <el-table-column label="昵称" prop="appUserListVo.nickname"/>
          <el-table-column label="到期时间" prop="appUserListVo.membersDate"/>
          <el-table-column label="简介" prop="appUserListVo.intro"/>
          <!-- <el-table-column label="分会名称" prop="guildName" /> -->
          <!-- <el-table-column label="会长" prop="leaderId"/> -->
          <!-- <el-table-column label="描述" prop="description" show-overflow-tooltip/> -->
        </el-table>
  </el-dialog>
</template>

<script setup lang="ts">
const ImageUpload = defineAsyncComponent(() => import('/@/components/Upload/Image.vue'));
const SearchForm = defineAsyncComponent(() => import('./components/SearchForm.vue'));
const {proxy} :any = getCurrentInstance() as ComponentInternalInstance;
const refSearchForm = ref();
const refTable = ref();
const optionData:any = reactive({});
const emit = defineEmits(['confirm']);
let isShow = ref(false);
let title = ref('所属会员');
let row:any = reactive({});
let tableData = reactive({
    loading: true,// 加载
    list: [],// 表格数据
    cellStyle: { textAlign: 'center' },
		headerCellStyle: {
			// textAlign: 'center',
			background: 'var(--el-table-row-hover-bg-color)',
			color: 'var(--el-text-color-primary)',
		},
  });
const init = (data:any) => {
  row = data;
  isShow.value = true;
  getList();
};
const getList = () => {
  tableData.loading = true;
  proxy.$request('get', '/admin/userGuilds/getGuildsMemberInfo/' + row.guildId, {}, (data,msg) => {
    tableData.list = data;
    tableData.loading = false;
  }, msg => {
    tableData.loading = false;
  });
}
const handleClose = () => {
  
}

defineExpose({
  init,
})
</script>

<style>

</style>